<template>
  <div class="custom-wrap-container">
    <div class="custom-wrap-header">
      <div id="headLeftInterlayer"></div>
      <div class="header-left-piece">
        <!--<p class="custom-wrap-title custom-title-s">群体事件率：</p>-->
        <div class="titleGroupEventRate"></div>
        <div class="textGroupEventRate">群体事件率</div>
        <div id="colonialEvtEchart" style="width:100%;height:100%;"></div>
      </div>
      <div id="headMiddleInterlayer"></div>
      <div class="header-middle-piece">
        <div class="titleSsryxl"></div>
        <div class="textSsryxl">涉事人员学历分析</div>
        <!--<p class="custom-wrap-title custom-title-l">涉事人员学历分析：</p>-->
        <div id="educationEchart" style="width:100%;height:100%;"></div>
      </div>
      <div id="headRightInterlayer"></div>
      <div class="header-right-piece">
        <div class="titlePchj"></div>
        <div class="textPchj">排查化解排名</div>
        <!--<p class="custom-wrap-title custom-title-s">排查化解排名：</p>-->
        <div id="custonTimer" style="margin-top:5%">
          <custom-timer></custom-timer>
        </div>
      </div>
    </div>
    <div class="custom-wrap-main">
      <div id="mainLeftInterlayer"></div>
      <div class="main-left-piece">
        <div class="titleSjhjl"></div>
        <div class="textSjhjl">事件化解率</div>
        <!--<p class="custom-wrap-title custom-title-s">事件化解率：</p>-->
        <div id="resolvedRateEchart" style="width:100%;height:100%;"></div>
      </div>
      <div id="mainMiddleInterlayer"></div>
      <div class="main-middle-piece">
        <div class="titleMdjfhj"></div>
        <div class="textMdjfhj">矛盾纠纷排查化解</div>
        <!--<p class="custom-wrap-title custom-title-l">矛盾纠纷排查化解：</p>-->
        <div id="contradictionEchart" style="width:100%;height:252px;"></div>
      </div>
      <div id="mainRightInterlayer"></div>
      <div class="main-right-piece">
        <div class="titleTzgg"></div>
        <div class="textTzgg">通知公告</div>
        <!--<p class="custom-wrap-title custom-title-s">通知公告：</p>-->
        <div id="custonTimer" style="margin-top:5%">
          <custom-timer :timer-data="timerData"></custom-timer>
        </div>
      </div>
    </div>
    <div class="custom-wrap-footer bottom">
      <div id="footLeftInterlayer"></div>
      <div class="footer-left-piece">
        <div class="titleMdlb"></div>
        <div class="textMdlb">矛盾纠纷类别分析</div>
        <!--<p class="custom-wrap-title custom-title-l">矛盾纠纷类别分析：</p>-->
        <div id="contradictionTypeEchart" style="width:100%;height:252px;"></div>
      </div>
      <div id="footRightInterlayer"></div>
      <div class="footer-right-piece">
        <div class="titleJfry"></div>
        <div class="textJfry">涉纠纷人员分析</div>
        <!--<p class="custom-wrap-title custom-title-nar">涉纠纷人员分析：</p>-->
        <div id="contradictionPeopleEchart" style="width:100%;height:100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomTimer from '@/components/CustomTimer'
export default {
  data () {
    return {
      textStyle: {
        color: 'white',
        echarts: null
      },
      timerData: [
        { name: '关于加强矛盾纠纷排查工作通知', infor: '2019-09-14', className: 'custon-timer-circle-active' },
        { name: '百姓矛盾无小事', infor: '2019-09-14' },
        { name: '加强矛盾调解人员业务培训通知', infor: '2019-09-14' },
        { name: '矛盾纠纷化解要及时有效', infor: '2019-09-14' },
        { name: '基层矛排常态化', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' }
      ]
    }
  },
  components: {
    CustomTimer
  },
  mounted () {
    this.loadColonialEvtEchart()
  },
  methods: {
    loadColonialEvtEchart () {
      let colonialEvtEchart = this.$echarts.init(document.getElementById('colonialEvtEchart'))
      let resolvedRateEchart = this.$echarts.init(document.getElementById('resolvedRateEchart'))
      const getOption = param => {
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: param.name,
              type: 'pie',
              radius: '45%',
              center: ['50%', '45%'],
              data: param.data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                  label: { color: 'white', formatter: '{b}: {@2012} ({d}%)' }
                }
              }
            }
          ]
        }
        return option
      }
      let echartData = {
        data: [
          {value: 21, name: '群体性事件'},
          {value: 310, name: '其他事件'}
        ],
        name: '群体事件'
      }
      colonialEvtEchart.setOption(getOption(echartData))
      echartData.data = [
        {value: 310, name: '已化解'},
        {value: 59, name: '未化解'}
      ]
      echartData.name = '事件化解率'
      resolvedRateEchart.setOption(getOption(echartData))
      this.loadEducationEchart()
    },
    loadEducationEchart () {
      let m = this
      let educationEchart = this.$echarts.init(document.getElementById('educationEchart'))
      educationEchart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          top: '5%',
          left: '1%',
          right: '6%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            name: '学历',
            nameTextStyle: m.textStyle,
            axisLine: {
              lineStyle: m.textStyle
            },
            data: ['小学以下', '小学', '中学', '大专', '本科', '硕士', '硕士以上'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            nameTextStyle: m.textStyle,
            axisLine: {
              lineStyle: m.textStyle
            }
          }
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '40%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      })
      this.loadContradictionEchartEchart()
    },
    loadContradictionEchartEchart () {
      let m = this
      let contradictionEchart = this.$echarts.init(document.getElementById('contradictionEchart'))
      contradictionEchart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['化解', '未化解'],
          textStyle: m.textStyle
          // top: 12
        },
        grid: {
          top: '15%',
          left: '1%',
          right: '5%',
          bottom: '1%',
          containLabel: true
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: m.textStyle
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: m.textStyle
            }
          }
        ],
        series: [
          {
            name: '化解',
            type: 'bar',
            itemStyle: {
              normal: {color: '#37a2da'}
            },
            data: [100, 88, 64, 81, 98, 59, 109, 79, 91, 80, 121, 116],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ],
              itemStyle: {
                normal: {color: '#37a2da'},
                label: {color: '#37a2da'}
              }
            }
          },
          {
            name: '未化解',
            type: 'bar',
            itemStyle: {
              normal: {color: '#ffd85c'}
            },
            data: [14, 23, 11, 15, 45, 54, 37, 28, 10, 7, 22, 26],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ],
              itemStyle: {
                normal: {color: '#ffd85c'},
                label: {color: '#ffd85c'}
              }
            }
          }
        ]
      })
      this.loadContradictionTypeEchart()
    },
    loadContradictionTypeEchart () {
      let contradictionTypeEchart = this.$echarts.init(document.getElementById('contradictionTypeEchart'))
      let m = this
      this.echarts = this.$echarts
      let total = 4088
      let data1 = [642, 437, 168, 389, 298, 219, 100, 49, 90, 133, 437, 168, 389, 350, 219]
      let data2 = []
      for (let i = 0; i < data1.length; i++) {
        let num = parseFloat(data1[i])
        total = parseFloat(total)
        let cur = (Math.round(num / total * 10000) / 100.00)
        data2.push(cur)
      }
      contradictionTypeEchart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: '{b0}：{c0}</br>{a1}：{c1}%'
        },
        grid: {
          top: '10%',
          left: '1%',
          bottom: '0.5%',
          right: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate: 30,
              color: 'white'
            },
            data: ['婚恋家庭纠纷', '邻里纠纷', '人格权纠纷', '无权相关纠纷', '侵权相关纠纷', '合同及相关纠纷', '劳动人事争议', '金融借贷纠纷', '土地局资源权纠纷', '其他民商事纠纷', '城乡建设发展纠纷', '涉民政纠纷', '涉司法涉纪检纠纷', '涉民族宗教纠纷', '其他'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 1000,
            interval: 100,
            axisLabel: {
              formatter: '{value} 件',
              color: 'white'
            }
          },
          {
            type: 'value',
            name: '百分比',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} %',
              color: 'white'
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 30,
            data: data1
          },
          {
            name: '占总比',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            areaStyle: {
              normal: {
                color: m.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#8ec6ad'
                }, {
                  offset: 0,
                  color: '#ffe'
                }])
              }
            },
            data: data2
          }
        ]
      })
      this.loadContradictionPeopleEchart()
    },
    loadContradictionPeopleEchart () {
      let m = this
      let contradictionPeopleEchart = this.$echarts.init(document.getElementById('contradictionPeopleEchart'))
      contradictionPeopleEchart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
          // formatter: '{b0}：{c0}</br>{a1}：{c1}%'
        },
        legend: {
          data: ['男', '女'],
          textStyle: m.textStyle,
          top: 12
        },
        grid: {
          left: '1%',
          top: '15%',
          right: '1%',
          bottom: '13%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 30,
            color: 'white'
          },
          data: ['20岁以下', '20~30', '30~40', '40~50', '50~60', '60~70', '70以上']
        },
        yAxis: {
          type: 'value',
          axisLabel: m.textStyle
        },
        series: [
          {
            name: '男',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            symbol: 'none',
            areaStyle: {},
            smooth: true
          },
          {
            name: '女',
            data: [234, 457, 157, 475, 578, 199, 783],
            type: 'line',
            symbol: 'none',
            areaStyle: {},
            smooth: true
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.header-left-piece,.header-middle-piece,.header-right-piece,
#headLeftInterlayer,#headMiddleInterlayer,#headRightInterlayer,
.main-left-piece,.main-middle-piece,.main-right-piece,
#mainLeftInterlayer,#mainMiddleInterlayer,#mainRightInterlayer,
.footer-left-piece,.footer-right-piece,
#footLeftInterlayer,#footRightInterlayer{
  height: 300px;
  position: absolute;
  top: 0;
}
.header-left-piece,.main-left-piece{
  width: 24%;
  left: 0;
  z-index: 1000;
}
.header-middle-piece,.main-middle-piece{
  width: calc(52% - 28px);
  left: calc(24% + 14px);
  z-index: 1000;
}
.header-right-piece,.main-right-piece,.footer-right-piece{
  width: 24%;
  right: 0;
  z-index: 1000;
}
.footer-left-piece{
  width: calc(76% - 14px);
  left: 0;
  z-index: 1000;
}
#headLeftInterlayer,#headMiddleInterlayer,#headRightInterlayer,
#mainLeftInterlayer,#mainMiddleInterlayer,#mainRightInterlayer,
#footLeftInterlayer,#footRightInterlayer{
  width: 100%;
  height: 100%;
  position: absolute;
  /*background:rgb(01, 33, 66);*/
  background:#101977;
  opacity: 0.2;
  border: 1px solid #07a6ff;
  border-radius: 6px;
  /*z-index: 999;*/
  /*background-color: #0f2e8c;*/
  /*opacity: 0.2;*/
  /*border-radius: 6px;*/
}
#footLeftInterlayer{
  width: calc(76% - 14px);
  left: 0;
}
#headLeftInterlayer,#mainLeftInterlayer{
  width: 24%;
  left: 0;
}
#headMiddleInterlayer,#mainMiddleInterlayer{
  width: calc(52% - 28px);
  left: calc(24% + 14px);
}
#headRightInterlayer,#mainRightInterlayer,#footRightInterlayer{
  width: 24%;
  right: 0;
}
.el-main::-webkit-scrollbar{
  display: none
}
  .bottom{
    margin-bottom: 30px;
  }
  .titleGroupEventRate{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/qtsjl.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textGroupEventRate{
    color: white;
    position: absolute;
    top: 3%;
    left: 7%;
  }
  .titleSsryxl{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/ssryxl.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textSsryxl{
    color: white;
    position: absolute;
    top: 3%;
    left: 9%;
  }
  .titlePchj{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/pchj.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textPchj{
    color: white;
    position: absolute;
    top: 3%;
    left: 4%;
  }
  .titleSjhjl{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/sjhjl.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textSjhjl{
    color: white;
    position: absolute;
    top: 3%;
    left: 7%;
  }
  .titleMdjfhj{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/mdjfhj.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMdjfhj{
    color: white;
    position: absolute;
    top: 3%;
    left: 9%;
  }
  .titleTzgg{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/tzgg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textTzgg{
    color: white;
    position: absolute;
    top: 3%;
    left: 10%;
  }
  .titleMdlb{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/mdlb.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMdlb{
    color: white;
    position: absolute;
    top: 2.5%;
    left: 12%;
  }
  .titleJfry{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/jfry.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textJfry{
    color: white;
    position: absolute;
    top: 2.5%;
    left: 5%;
  }
</style>
